import React, { useEffect } from 'react';
import Container from '@components/Container';
import { Form } from 'antd';
import { useNewMakeList } from '@hooks/index';
import { SearchContainer, FormModal } from './components/index';
import useColumns from './hooks/useColumns';
import { CustomTitle, EditableTable } from '{{relativePath}}../../components/index';
import withReduxListener from '{{relativePath}}../../components/HOC/withReduxListener';
import asyncManage from '{{relativePath}}../../utils/asyncManage';
import { MODAL_CODE } from './constants';
import styles from './index.module.less';

function {{componentName}}({ form, openModalAction }) {
  const { list, paginationConfig, loading, setFormParams, setPagination, getList, deleteItem } =
    useNewMakeList({
      getList: asyncManage.user_getList,
      deleteItem: asyncManage.user_delete
    });

  // 搜索
  const handleSearch = (key, value) => {
    setFormParams(prev => ({ ...prev, [key]: value }));
    setPagination(prev => ({ ...prev, current: 1 }));
    getList();
  };

  // 新增
  const handleAdd = () => {
    openModalAction({
      code: MODAL_CODE,
      type: 'add'
    });
  };

  // 编辑
  const editItem = record => {
    openModalAction({
      code: MODAL_CODE,
      data: record,
      type: 'edit'
    });
  };

  useEffect(() => {
    getList();
  }, []);

  const columns = useColumns({ deleteItem, editItem });
  return (
    <Container className={styles.manageWrapper}>
      <CustomTitle />
      <SearchContainer form={form} onSearch={handleSearch} foldNum={1} />
      <EditableTable
        tableProps=\{{
          loading,
          columns,
          dataSource: list,
          pagination: paginationConfig,
          scroll: { x: 900 }
        }}
      />
      <FormModal refreshList={getList} />
    </Container>
  );
}

export default withReduxListener()(Form.create()({{componentName}}));
